<!--
 * @Author: your name
 * @Date: 2022-01-06 11:06:24
 * @LastEditTime: 2022-01-08 22:12:31
 * @LastEditors: Please set LastEditors
 * @Description: 关于我们
 * @FilePath: \homepage\src\views\page\index.vue
-->
<template>
  <div>
    <Header />
    <el-main>
      <div class="con">
        <el-card style="width: 1000px" class="card">
          <i class="el-icon-s-promotion"></i>&nbsp;
          <span class="classify">关于我们</span>
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height: 100%"
          >
            <!-- 表格 -->
            <el-table
              :data="Data"
              border
              :show-header="false"
              class="table"
              height="600px"
              style="width: 100%"
              show-overflow-tooltip="true"
            >
              <el-table-column prop="dest">
                <template #default="{ row }">
                  <div class="right">
                    <div class="title">
                      {{ row.title }}
                    </div>
                    <div class="dest" v-html="contentHtml">
                      {{ contentHtml }}
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-card>
      </div>
    </el-main>
    <Footer />
  </div>
</template>

<script>
import { pages } from "@/api/page.js";

export default {
  data() {
    return {
      Data: [],
      contentHtml: "",
    };
  },
  async created() {
    const { data } = await pages();
    this.Data = data;
    this.Data.map((item) => {
      this.contentHtml = item.content;
    });
  },
};
</script>


<style lang="less" scoped>
.classify {
  font-size: 20px;
  color: coral;
}
.el-icon-s-promotion {
  font-size: 30px;
  color: coral;
}
body {
  height: 500px;
  padding-bottom: 200px;
  margin-bottom: 200px;
}
.card {
  margin: 0 auto;
}
.table {
  text-align: center;
}
.title {
  font-size: 20px;
  font-weight: 700;
}
.right {
  text-align: left;
}
.cell {
  line-height: 180px;
}
.pic {
  width: 100%;
  height: 150px;
  object-fit: contain;
}
.el-row--flex.is-align-middle {
  margin-top: 20px;
}
</style>